<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="top">
        <Search @handleSearch="handleSearch" :formData="formData" :formOptions="filterFormOptions"></Search>
        <Operate ref="operate" @operateAction="operateAction" @refreshItemList="getItemList" :formData="formData" :multipleSelection="multipleSelection">
          <template v-slot:operateHeader = "value">
            <el-button @click="customHeaderOperateAction({'key': 'shareApply', 'beforeTypes': 'single', 'actionType': ''})" type="primary" size="small">共享申请</el-button>
            
          </template>
        </Operate>
        <Table :itemList="itemList" :formData="formData" :dictOptions="dictOptions" @handleSelectionChange="handleSelectionChange">
          <template v-slot:custom = "value">
              <div v-if="value.slotKey=='status'">
                <el-switch
                  v-model="value.slotRowData['status']"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="switchChange(value.slotRowData)"
                  />
              </div>
            </template>
          <template v-slot:operateRow = "value">
            <el-button v-for="(item, index) in formData.operateList" :key="index" v-if="item.place=='row'" @click="operateAction(item, itemList[value.slotRow])" :type="item.buttonType" :plain="item.buttonType=='text'?false:true" size="small">{{item.name}}</el-button>
            <el-button @click="customRowOperateAction({'key': 'setRiders', 'actionType': ''}, itemList[value.slotRow])" type="text" size="small">设置配送员</el-button>
          </template>
        </Table>
        <pagination
          style="background: #ffffff; height: 50px"
          v-show="totalSize > 0"
          :total="totalSize"
          :page.sync="page"
          :limit.sync="size"
          @pagination="getItemList"
        />
      </el-col>
    </el-row>
    <errorDialog ref="errorDialog" :errorList="errorList"></errorDialog>
    <setRiders ref="setRiders"></setRiders>
  </div>
</template>

<script>
import { getFieldListOptionByFormId, getFieldFormOptionByFormId, getFilterFormOptionByFormId } from '@/api/interface/form.js'
import { getItemList, getFormData, operateActionPost } from '@/api/interface/operate.js'
import errorDialog from '@/views/interface/form/errorDialog'
import setRiders from './setRiders.vue'
export default {
  components: { errorDialog, setRiders},
  data() {
    return {
      page: 1,
      size: 20,
      totalSize: 0,
      itemList: [],
      formId: '',
      formData: {},
      searchParams: {},
      filterFormOptions: {},
      fieldForm: {},
      multipleSelection: [],
      formOptions: {},
      dictOptions: {},
      errorList: []
    }
  },
  created(){
    this.formId = this.$route.meta.formModel.id
    this.getItemList()
    this.getFormData()
    this.getFilterFormOptionByFormId()
    this.getFieldFormOptionByFormId()
    this.getFieldListOptionByFormId()
  },
  methods:{
    switchChange(e){
        operateActionPost(this.$route.meta.formModel.url + 'update' + 'Action/', {obj_id: e.id, status: e.status}).then((res) => {
          if(res.data.code == 10000){
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.getItemList()
          }
        })
      },
    handleSearch(searchParams){
      this.searchParams = Object.assign(this.searchParams, searchParams)
      this.page = 1
      this.getItemList()
    },
    handleSelectionChange(val){
      this.multipleSelection = val
    },
    customHeaderOperateAction(operate){
      this.$refs.operate.operateAction(operate)
    },
    // 自定义行内操作
    customRowOperateAction(operate, row){
      operate.place = 'row'
      this.operateAction(operate, row)
    },
    operateAction(operate, val){
      console.log('自定义操作', operate, val)
      if(operate.actionType == 'api'){
        var params = {}
        if(operate.place == 'row'){
          params.obj_id = val.id
        }else if(operate.place == 'header'){
          params.obj_ids = val
        }else{
          this.$message({
              message: '缺少位置参数',
              type: 'info'
            })
        }
        operateActionPost(this.$route.meta.formModel.url + operate.key + 'Action/', params).then((res) => {
          if(res.data.code == 10000){
            this.$message({
              message: res.data.data,
              type: 'success'
            })
            this.getItemList()
          }else if(res.data.code == 10001){
            console.log('errorList', res.data.data)
            this.errorList = res.data.data
            this.$refs.errorDialog.show()
          }
        })
        return
      }
      switch (operate.key) {
        case 'update':
          this.$router.push({name: 'Update', query: {formData: encodeURIComponent(JSON.stringify(this.formData)), rowId: val.id}})
          break;
        case 'setRiders':
          this.$refs.setRiders.shopInfo = val
          this.$refs.setRiders.show()
          break;
        default:
            break;
      }
    },
    // 获取表单配置数据
    getFormData(){
      getFormData({formId: this.formId}).then(res=>{
        if (res.data.code == 10000) {
          this.formData = res.data.data
        }
      })
    },
    // 获取列表数据
    getItemList() {
      this.searchParams.page = this.page
      this.searchParams.size = this.size
      getItemList(this.$route.meta.formModel.url, this.searchParams).then(res => {
        if (res.data.code == 10000) {
          this.totalSize = res.data.data.total_count
          this.itemList = res.data.data.list
        }
      });
    },
    // 获取字典
    getFilterFormOptionByFormId(){
        getFilterFormOptionByFormId({
          formId: this.formId
        }).then(res=>{
          if(res.data.code == 10000){
            this.filterFormOptions = res.data.data
          }
        })
      },
    // 获取字典
    getFieldFormOptionByFormId(){
      getFieldFormOptionByFormId({
        formId: this.formId
      }).then(res=>{
        if(res.data.code == 10000){
          this.formOptions = res.data.data
        }
      })
    },
    // 获取字典
    getFieldListOptionByFormId(){
      getFieldListOptionByFormId({
        formId: this.formId
      }).then(res=>{
        if(res.data.code == 10000){
          this.dictOptions = res.data.data
        }
      })
    },
  },
}
</script>


<style lang="scss" scoped>

</style>
